#{meta /}

#{title index.name/}

#{javascript "words/basic.js"/}
#{stylesheet "words/basic.css"/}

#{body}

<div class="container">
	<div class="row">
		<div class="col-lg-3">
			#{list items:groups, as:'group'}
				<div>
					<div class="list-group">
					<div class="list-group-item font-bold">${group.name}</div>
					#{list items:group.contents, as:'content'}
						#{if content.value == index.value}
							<li class="list-group-item active">${content.name}</li>
						#{/if}
						#{else}
							<a href="/words/basic/${content.value}" class="list-group-item">${content.name}</a>
						#{/else}
					#{/list}
					</div>
				</div>
			#{/list}
		</div>
		<div class="col-lg-9 pre-hide" id="data-body">
			<h3>${index.name}</h3>
			<h3>${data?.hence}</h3>
			<h3>${data?.hint}</h3>
			<hr/>
			#{if data}
				#{if data.usages}
				<div class="usage">
					#{list items:data.usages, as:'val'}
						<div>${val}</div>
					#{/list}
				</div>
				#{/if}
				#{list items:data.values, as:'value'}
					<div class="div-block">
						<div class="div-type">【${value.type}】</div>
						<div>${value.meaning}</div>
						#{if value.examples}
						<div class="div-examples">
							#{list items:value.examples, as:'example'}
								<div class="div-example">
									<div class="example-sentence font-jp">${example.jp}</div>
									<div>${example.cn}</div>
								</div>
							#{/list}
						</div>
						#{/if}
						#{list items:value.usages, as:'usage'}
							<div>
								<div class="usage">
									#{list items:usage.values, as:'val'}
										<div>${val}</div>
									#{/list}
								</div>
								<div>${usage.meaning}</div>
								<div class="div-examples">
								#{list items:usage.examples, as:'example'}
									<div class="div-example">
										<div class="example-sentence font-jp">${example.jp}</div>
										<div>${example.cn}</div>
									</div>
								#{/list}
								</div>
							</div>
						#{/list}
					</div>
				#{/list}
			#{/if}
		</div>
	</div>
</div>

#{/body}

